<template>
	<FormItem v-bind="column">
		<component :is="column.renderName || 'Input'" v-bind="componentProps" v-model="formDataIn[column.prop]" @change="onItemChange">
			<template v-if="isGroup(column.renderName) && column.renderProps.options.length > 0">
				<template v-for="(option, optionIndex) in column.renderProps.options" :key="optionIndex">
					<component :is="isGroup(column.renderName)" v-bind="option" />
				</template>
			</template>
		</component>
	</FormItem>
</template>

<script>
export default {
	name: 'IvSingleItem',
	inject: ['shivform'],
	props: {
		data: {
			type: Object,
			default() {
				return {}
			}
		},
		column: {
			type: Object,
			default() {
				return {}
			}
		},
		groupRenders: {
			type: Object,
			default() {
				return {}
			}
		},
		size: {
			type: String
		}
	},
	data() {
		return {
			formDataIn: this.data
		}
	},
	computed: {
		componentProps() {
			let { disabled } = this.shivform || {}
			let defaultProps = {
				Input: { placeholder: disabled ? '' : `请输入${this.column.label}` },
				Select: { placeholder: disabled ? '' : `请选择${this.column.label}` },
				Switch: { width: 50, inlinePrompt: true, activeValue: 1, inactiveValue: -1, activeText: '是', inactiveText: '否' }
			}
			return Object.assign({ class: ['form-item-component'] }, defaultProps[this.column.renderName], this.column.renderProps)
		}
	},
	watch: {
		data: {
			handler(newvalue) {
				this.formDataIn = this.data
			},
			deep: true
		}
	},
	created() {},
	methods: {
		isGroup(field) {
			return this.groupRenders[field]
		},
		onItemChange($event) {
			this.shivform.$emit('item-change', $event, this.column)
		}
	}
}
</script>

<style scoped lang="scss"></style>
